import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { ButtonWithTooltip } from "@renderer/components/business/button-with-tooltip";
import { CLEAR_EDITOR_COMMAND } from "lexical";
import { Eraser } from "lucide-react";
import { useCallback } from "react";

interface ClearEditorBtnProps {
  title: string;
}

export function ClearEditorBtn({ title }: ClearEditorBtnProps) {
  const [editor] = useLexicalComposerContext();

  const handleReset = useCallback(() => {
    editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
  }, [editor]);

  return (
    <ButtonWithTooltip size="sq-sm" title={title} onClick={handleReset}>
      <Eraser className="h-4 w-4" data-slot="icon" />
    </ButtonWithTooltip>
  );
}
